<template>
    <view>
        <commonHeader :navigationBarStyle="{ iconText: '搜索' }" :showBack="true"></commonHeader>
        <view class="page-content" :style="{'padding-top': lineHeight + 'rpx'}">
              <view class="group_3 flex-row .">
            <view  class="block_3">
                <u-search :showAction="false" placeholder="请输入商品信息搜索" @search="search" shape="square" v-model="searchWord"></u-search>
            </view>
            <view class="block_4">
                <image class="block_4img" referrerpolicy="no-referrer" src="/static/icon/home/icon_zhanshi@2x.png" />
            </view>
        </view>
          <view class="res" :style="{height: `calc(100vh - ${lineHeight}rpx - ${lineHeight}rpx)`}">
               <scroll-view
                                        :scroll-top="scrollTop"
                                        @scrolltolower="lower"
                                        @scrolltoupper="upper"
                                        class="scroll-Y"
                                        scroll-y="true"
                                    >
                                        <view class="block_6">
                                            <view
                                                @click="pushProductDetails(goods)"
                                                class="block_7 flex-row"
                                                v-for="goods in goodsList"
                                            >
                                                <view class="image-text_3 flex-col justify-between">
                                                    <view class="group_5 flex-col">
                                                        <image
                                                            :src="goods.image"
                                                            class="group_5_image"
                                                            referrerpolicy="no-referrer"
                                                        />
                                                    </view>
                                                    <view class="text-group_3 flex-col justify-between">
                                                        <text class="text_13">{{ goods.productName }}</text>
                                                        <view class="text_14"> 
                                                          <view><text class="text_15">￥</text>{{ goods.price }}</view>
                                                            <image
                                                              @click.stop="addshowRun(goods)"
                                                              class="label_5"
                                                              referrerpolicy="no-referrer"
                                                              src="/static/icon/home/icon_tianjia@2x.png"
                                                          />
                                                        </view>
                                                    </view>
                                                </view>
                                               
                                              
                                            </view>
                                            <u-loadmore :nomoreText="statusText" :status="status" v-if="false" />
                                            <view class="block_empty">
                                                <u-empty mode="data" v-if="!goodsList || !goodsList.length"></u-empty>
                                            </view>
                                        </view>
                                    </scroll-view>
          </view>
        </view>

        
            <u-popup :closeOnClickOverlay="true" :show="addshow" @close="addshow = false">
                <view class="addbox">
                    <view class="info">
                        <view class="le">
                            <image :src="tempGoodsData.images[0]" class="leimg" />
                        </view>
                        <view class="ri">
                            <view class="name">{{ tempGoodsData.productName }}</view>
                            <view class="price">
                                <text class="price-c">￥</text>
                                {{ tempGoodsData.price }}
                            </view>
                        </view>
                    </view>
                    <view class="names" v-if="tempGoodsData.skuType === 2">
                        <view class="names-list" v-for="list in tempGoodsData.names">
                            <view class="names-title">{{ list.skuName }}</view>
                            <view class="names-item-box">
                                <view
                                    :class="valueCodess[list.nameCode] == item.valueCode ? 'names-item-act' : ''"
                                    @click="selectValuecode(list.nameCode, item.valueCode)"
                                    class="names-item"
                                    v-for="item in list.values"
                                >{{ item.skuValue }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="ops-box">
                        <view class="ops-title">数量</view>
                        <view class="ops-number">
                            <u-number-box v-model="addCarNumber"></u-number-box>
                        </view>
                    </view>
                    <view class="btns">
                        <view @click="addCarRun" class="btn">加入购物车</view>
                        <view @click="addshow = false" class="close">
                            <u-icon color="#333333" name="close-circle" size="18"></u-icon>
                        </view>
                    </view>
                </view>
            </u-popup>

    </view>
</template>

<script>
import $http from "@/config/requestConfig";
export default {
    data() {
        return {
				lineHeight: 0,
        scrollTop: 0,
        page: 1,
        pageSize: 10,
        searchWord: '',
        goodsList: [],
        goodsTotal: 0,
        shopId: null,
        addSkuid: null,
        shopCurrent: null,
        tempGoodsData: {},
        addCarNumber: 1,
        valueCodess: {}, // 存放规格参数
        isShowContent: false,
            addshow: false,
        gzShow: false,
      };
    },
    onShow() {
    uni.$on('getHeight', res => {
      console.log(res, 'getHeight');
      this.lineHeight = res.ktxStatusHeight + 84;
      })
    },
    mounted () {
        const shopinfo = uni.getStorageSync("shopInfo");
        this.shopId = shopinfo.shopId
    },
    methods: {
      search() {
        this.page = 1,
        this.pageSize = 10
        this.goodsTotal = 0;
        this.goodsList = [];
        this.getGoodsData()
      },
      // 获取商品数据
        getGoodsData() {
            $http
                .get("product/queryList", {
                    shopId: this.shopId,
                    search: this.searchWord,
                    page: this.page,
                    pageSize: this.pageSize,
                })
                .then((res) => {
                    console.log(res);
                    this.goodsTotal = res.total;
                    this.goodsList = this.goodsList.concat(res.list);
                });
        },

           /**
         * 上拉加载数据
         */
        upper: function (e) {
            // console.log(e);
            // this.page = 1;
            // this.goodsList = [];
            // this.getGoodsData();
        },
        /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
        lower(e) {
            if (this.goodsTotal > this.goodsList.length) {
                this.page += 1;
                this.getGoodsData();
            }
        },
        pushProductDetails(good) {
            uni.navigateTo({
                url:
                    "/pages/home/productDetails?options=" +
                    encodeURIComponent(JSON.stringify(good)),
            });
        },
            /**
         * 加入购物车抽屉
         */
        addshowRun(item) {
            this.addshow = true;
            this.addSkuid = item.skuId;
            this.addCarNumber = 1;
            $http
                .get("product/getById", {
                    shopId: item.shopId,
                    productId: item.productId,
                    skuId: item.skuId,
                })
                .then((res) => {
                    console.log(res);
                    this.tempGoodsData = res;
                    if (res.skuType !== 1) {
                        this.dispSpac(res);
                    } else {
                    }
                });
        },
        // 默认spac值
        dispSpac(data) {
            this.valueCodess = {};
            for (const some of data.names) {
                this.valueCodess[some.nameCode] = some.values[0].valueCode;
            }
            console.log(this.valueCodess);
        },
        // 购物车列表
        async getCart() {
            const shopInfo = uni.getStorageSync("shopInfo");
            await this.$http
                .get("cart/getCart", {
                    shopId: shopInfo.shopId,
                })
                .then((res) => {
                    const data = res;
                    let count = 0;
                    data.forEach((item, index) => {
                        item.skus.forEach((skuItem, skuIndex) => {
                            count = count + skuItem.number;
                        });
                    });
                    uni.$emit("cartCount", count);
                });
        },
        /**
         * 加入购物车请求
         */
        addCarRun() {
            const params = {
                skuId: this.getSkuidBycode(),
                number: this.addCarNumber,
            };
            $http.post("cart/addCart", params).then((res) => {
                if (res) {
                    console.log(res);
                    if (res) {
                        uni.showToast({
                            title: "加入购物车成功",
                        });
                        this.getCart();
                        this.addshow = false;
                    }
                } else {
                }
            });
        },
        // 选择规格
        selectValuecode(key, value) {
            console.log(key);
            console.log(value);
            this.valueCodess[key] = value;
            console.log(this.valueCodess);
            this.$forceUpdate();
        },
        /**
         * 根据所选规格获取skuid
         */
        getSkuidBycode() {
            if (this.tempGoodsData.skuType === 1) {
                //单规格
                return this.tempGoodsData.skuId;
            }
            const temp = [];
            for (const key in this.valueCodess) {
                if (Object.hasOwnProperty.call(this.valueCodess, key)) {
                    const value = this.valueCodess[key];
                    temp.push(value);
                }
            }
            const code = temp.toString();
            return this.tempGoodsData.map[code].skuId;
        },
    },
};
</script>

<style lang="scss">
.group_3 {
    background-color: rgba(255, 255, 255, 1);
    width: 748rpx;
    height: 110rpx;
    margin-left: 2rpx;
}

.block_3 {
    width: 585rpx;
    height: 70rpx;
    margin: 16rpx 0 0 28rpx;
}

.search_1 {
    background-color: rgba(247, 248, 250, 1);
    width: 585rpx;
    height: 70rpx;
}

.image-text_2 {
    width: 243rpx;
    height: 29rpx;
    margin: 24rpx 0 0 22rpx;
}

.label_3 {
    width: 27rpx;
    height: 27rpx;
    margin-top: 2rpx;
}

.text-group_2 {
    width: 202rpx;
    height: 27rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
}

.label_4 {
    width: 41rpx;
    height: 40rpx;
    margin-top: 15rpx;
}

.block_4 {
    // display: flex;
    // align-items: center;
    margin-right: 30rpx;
    margin-top: 26rpx;
	margin-left: 30rpx;
}

.block_4img {
    width: 40rpx;
    height: 40rpx;
}

.group_4 {
    width: 750rpx;
    margin: 15rpx 0 1rpx 0;
    height: calc(100vh - 270px);
}

.block_5 {
    width: 200rpx;
    height: 100%;
    overflow-y: auto;
    background: #fff;
}
.res{
  width: 750rpx;
}
.block_6 {
    // margin-left: 20rpx;
    // margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
}

.block_7 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    width: 50%;
    height: 366rpx;
    margin-bottom: 20rpx;
	display: flex;
	justify-content: center;
}

.image-text_3 {
    width: 300rpx;
    height: 347rpx;
}

.group_5 {
    border-radius: 6rpx 0rpx 0rpx 6rpx;
    width: 300rpx;
    height: 252rpx;
}

.group_5_image {
    width: 250rpx;
    height: 220rpx;
    margin: 15rpx auto;
}

.text-group_3 {
    margin: 19rpx 0 0 14rpx;
}

.text_13 {
    width: 100%;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text_14 {
    color: rgba(232, 108, 100, 1);
    font-size: 36rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 18rpx 0 0 0rpx;
    display: flex;
    justify-content: space-between;
    padding-right: 20rpx;
}

.text_15 {
    width: 16rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    // margin: 326rpx 0 0 -236rpx;
}

.label_5 {
    width: 42rpx;
    height: 42rpx;
}

.block_8 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    width: 300rpx;
    height: 449rpx;
    margin-top: 10rpx;
}

.image-text_4 {
    width: 300rpx;
    height: 430rpx;
}

.block_9 {
    background-color: rgba(162, 132, 132, 1);
    border-radius: 6rpx 0rpx 0rpx 6rpx;
    width: 300rpx;
    height: 335rpx;
}

.text-group_4 {
    width: 153rpx;
    height: 75rpx;
    margin: 20rpx 0 0 14rpx;
}

.text_16 {
    width: 153rpx;
    height: 29rpx;
    color: rgba(1, 1, 1, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
}

.text_17 {
    width: 38rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 36rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 18rpx 0 0 28rpx;
}

.text_18 {
    width: 16rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 409rpx 0 0 -236rpx;
}

.block_10 {
    background-color: rgba(235, 109, 95, 1);
    border-radius: 50%;
    z-index: 53;
    height: 42rpx;
    width: 42rpx;
    position: relative;
    margin: 392rpx 15rpx 0 163rpx;
}

.block_11 {
    background-color: rgba(255, 255, 255, 1);
    width: 20rpx;
    height: 2rpx;
    margin: 20rpx 0 0 11rpx;
}

.block_12 {
    background-color: rgba(255, 255, 255, 1);
    z-index: 55;
    position: absolute;
    left: 20rpx;
    top: 11rpx;
    width: 2rpx;
    height: 20rpx;
}

.block_13 {
    width: 255rpx;
    height: 920rpx;
    margin-left: 12rpx;
}

.box_6 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    width: 300rpx;
    height: 620rpx;
}

.image-text_5 {
    width: 300rpx;
    height: 600rpx;
}

.box_7 {
    background-color: rgba(162, 132, 132, 1);
    border-radius: 6rpx 0rpx 0rpx 6rpx;
    position: fixed;
    right: 0rpx;
    top: 550rpx;
    z-index: 1000;
}

.text-wrapper_2 {
    box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(51, 51, 51, 0.36);
    background-color: rgba(233, 108, 99, 1);
    border-radius: 6rpx 6rpx 0rpx 0rpx;
    height: 230rpx;
    width: 82rpx;
    padding: 22rpx 26rpx;
}

.paragraph_3 {
    width: 30rpx;
    height: 186rpx;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    text-align: left;
    line-height: 52rpx;
}

.text-group_5 {
    width: 121rpx;
    height: 76rpx;
    margin: 19rpx 0 0 14rpx;
}

.text_19 {
    width: 121rpx;
    height: 30rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 30rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 30rpx;
}

.text_20 {
    width: 56rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 36rpx;
    font-family: SFUIText-Bold;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 18rpx 0 0 28rpx;
}

.text_21 {
    width: 16rpx;
    color: rgba(232, 108, 100, 1);
    font-size: 28rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
    margin: 579rpx 220rpx 0 -236rpx;
}

.image-wrapper_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6rpx;
    height: 290rpx;
    width: 300rpx;
    margin: 10rpx 0 0 2rpx;
}

.image_2 {
    width: 300rpx;
    height: 290rpx;
}

.image-wrapper_2 {
    box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(51, 51, 51, 0.36);
    background-color: rgba(233, 108, 99, 1);
    border-radius: 6rpx 6rpx 0rpx 0rpx;
    width: 82rpx;
    height: 169rpx;
    position: fixed;
    right: 0rpx;
    top: 800rpx;
    z-index: 1000;
}

.label_6 {
    width: 42rpx;
    height: 38rpx;
    margin: 25rpx 20rpx;
}

.label_7 {
    width: 42rpx;
    height: 38rpx;
    margin: 25rpx 20rpx 0 20rpx;
}

.section_6 {
    background-color: rgba(255, 255, 255, 1);
    z-index: 79;
    position: absolute;
    left: 0;
    top: 1244rpx;
    width: 750rpx;
    height: 90rpx;
}

.text_22 {
    z-index: 82;
    width: 66rpx;
    height: 33rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 29rpx 0 0 92rpx;
}

.box_8 {
    background-color: rgba(234, 150, 149, 1);
    border-radius: 6rpx;
    z-index: 81;
    width: 78rpx;
    height: 12rpx;
    margin: -9rpx 0 25rpx 86rpx;
}

.text-wrapper_3 {
    z-index: 80;
    position: absolute;
    left: 250rpx;
    top: -1rpx;
    width: 500rpx;
    height: 91rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps6lpsjwwmt1jqtmoryu2sd9jq3zhs7jwaeb2311fe-fd00-42d8-9bd7-3dc6c87ba56e)
        100% no-repeat;
    background-size: 100% 100%;
}

.text_23 {
    width: 97rpx;
    height: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 34rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 30rpx 0 0 76rpx;
}

.text_24 {
    width: 132rpx;
    height: 33rpx;
    color: rgba(153, 153, 153, 1);
    font-size: 34rpx;
    text-align: left;
    white-space: nowrap;
    line-height: 34rpx;
    margin: 30rpx 60rpx 0 135rpx;
}

.block_empty {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.addbox {
    width: 750rpx;
    max-height: 890rpx;
    padding: 20rpx 0rpx 40rpx 40rpx;

    .info {
        width: 100%;
        display: flex;

        .le {
            width: 205rpx;
            height: 140rpx;
            border-radius: 8rpx;

            .leimg {
                width: 100%;
                height: 100%;
                border-radius: 8rpx;
            }
        }

        .ri {
            flex: 1;
            margin-left: 24rpx;
            height: 140rpx;

            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            .name {
                width: 100%;
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
                margin-top: 20rpx;
            }

            .price {
                font-size: 40rpx;
                font-family: SF UI Text;
                font-weight: bold;
                color: #e86c64;
                margin-top: 38rpx;

                .price-c {
                    font-size: 32rpx;
                }
            }
        }
    }

    .names {
        margin-top: 30rpx;

        .names-title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            margin: 40rpx 0rpx 20rpx 0;
        }

        .names-item-box {
            display: flex;

            .names-item {
                height: 56rpx;
                border-radius: 12rpx;
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #333333;
                border: 1rpx solid #333333;
                padding: 10rpx 22rpx;
                margin-right: 20rpx;
            }

            .names-item-act {
                background: #fa625d;
                color: #fff;
                border: none;
            }
        }
    }

    .ops-box {
        height: 130rpx;
        display: flex;
        align-items: center;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        margin-top: 34rpx;

        .ops-title {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        .ops-number {
            margin-left: 38rpx;
        }
    }

    .btns {
        display: flex;
        margin-top: 125rpx;

        .btn {
            width: 585rpx;
            height: 75rpx;
            background: #fa625d;
            border-radius: 38rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .close {
            margin-left: 26rpx;
            height: 75rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

.getpage {
    height: 100vh;
    width: 750rpx;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title1 {
        width: 100%;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000000;
        text-align: center;
    }

    .title2 {
        margin-top: 30rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 300;
        color: #666666;
        text-align: center;
    }

    .button_info {
        width: 310rpx;
        height: 76rpx;
        background: #f9625d;
        border-radius: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 70rpx;

        .text {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-left: 14rpx;
        }
    }
}
.infoBox {
    height: 760rpx;
    width: 750rpx;
    background: white;
    position: absolute;
    top: 0px;
    z-index: 1000;
    // left: -345rpx;
    .tabs {
        width: 100%;
        background: #fff;
        box-shadow: 0px 2rpx 6rpx 0px rgba(51, 51, 51, 0.18);
    }
    .content {
        height: 650rpx;
        overflow-y: auto;
        width: 100%;
        .content-c {
            padding: 40rpx 48rpx;
            .sinfo {
                .t {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                }
                .c {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    margin-left: 14rpx;
                }
            }
            .coupons-title {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 600;
                color: #333333;
            }
            .coupons-list {
                width: 670rpx;
                min-height: 335rpx;
                background: #ffffff;
                box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(51, 51, 51, 0.12);
                border-radius: 12rpx;
                padding: 20rpx 22rpx;
                margin-top: 24rpx;
                .coupons-list-t {
                    height: 226rpx;
                    display: flex;
                    width: 100%;
                    .left {
                        height: 100%;
                        width: 120rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-right: 2rpx dotted #ededed;
                        .fu {
                            font-size: 32rpx;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #e86c64;
                        }
                        .am {
                            font-size: 62rpx;
                            font-family: SF UI Text;
                            font-weight: 600;
                            color: #e86c64;
                        }
                    }
                    .right {
                        height: 100%;
                        width: 500rpx;
                        margin-left: 20rpx;
                        .right-t {
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            .fac {
                                font-size: 32rpx;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #333333;
                            }
                            .linq {
                                width: 124rpx;
                                height: 52rpx;
                                background: #fb645d;
                                border-radius: 26rpx;
                                font-size: 24rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #ffffff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                        }
                        .right-m {
                            margin-top: 28rpx;
                            margin-bottom: 29rpx;
                            .mk {
                                font-size: 30rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #999999;
                            }
                            .ky {
                                font-size: 30rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #333333;
                            }
                            .am {
                                font-size: 36rpx;
                                font-family: SF UI Text;
                                font-weight: 600;
                                color: #e86c64;
                            }
                        }
                        .right-b {
                            display: flex;
                            align-items: center;
                            .yxxq {
                                font-size: 30rpx;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #999999;
                            }
                            .date {
                                margin-left: 64rpx;
                                font-size: 30rpx;
                                font-family: SF UI Text;
                                font-weight: 400;
                                color: #333333;
                            }
                        }
                    }
                }
                .coupons-list-b {
                    width: 100%;
                    height: 50rpx;
                    background: #f6f7fb;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 20rpx;
                    .gc {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #666666;
                    }
                }
                .guz{
                  padding-top: 40rpx;
                  width: 100%;
                  border-top: 2rpx dotted #EDEDED;
                  margin-top: 10rpx;
                  .gzitem{
                    width: 100%;
                    display: flex;
                    align-items: center;
                    .gzitem-t{
                      font-size: 30rpx;
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: #999999;
                    }
                    .gzitem-c{
                      font-size: 30rpx;
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: #333333;
                      margin-left: 54rpx;
                    }
                  }
                }
            }
            .ch {
                margin-top: 20rpx;
                border-top: 2rpx dotted #ededed;
                padding-top: 44rpx;
                .titleee {
                    display: flex;
                    justify-content: space-between;
                    .titleee-t {
                        font-size: 32rpx;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: #333333;
                    }
                    .chbtn {
                        width: 124rpx;
                        height: 52rpx;
                        background: #fb645d;
                        border-radius: 26rpx;
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #ffffff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
                 .tag {
                      width: 242rpx;
                      height: 64rpx;
                      border: 2rpx solid rgba(153, 153, 153, 0.3);
                      border-radius: 10rpx;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      .tag-l{
                        font-size: 34rpx;
                        font-family: SF UI Text;
                        font-weight: 600;
                        color: #333333;
                      }
                      .tag-r{
                        width: 120rpx;
                        height: 54rpx;
                        background: #FB645D;
                        border-radius: 8rpx;
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      }
                }
            }
        }
        .content-cq{
          width: 100%;
          .imgsss{
            width: 456rpx;
            height: 375rpx;
            margin: 110rpx auto 0;
          }      
          .qdaitext{
            width: 100%;
            text-align: center;
            margin-top: 10rpx;
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
          }    
        }
    }
    .bottom {
        height: 20rpx;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .black {
            background-color: rgba(222, 225, 234, 1);
            border-radius: 4rpx;
            z-index: 12;
            width: 60rpx;
            height: 8rpx;
        }
    }
}
</style>
